$(document).ready(function() {
    $( ".fromDate" ).datepicker({
        changeMonth: true,
        changeYear: true,
        showOn: 'button',
        buttonImage: '../../images/calendar.png',
        buttonImageOnly: true,
        dateFormat: 'yy/mm/dd',
        onClose: function( selectedDate ) {
            $( ".toDate" ).datepicker( "option", "minDate", selectedDate );
        }
    }).click(function() {
        $(this).datepicker('show');
    });
    $( ".toDate" ).datepicker({
        changeMonth: true,
        changeYear: true,
        showOn: 'button',
        buttonImage: '../../images/calendar.png',
        buttonImageOnly: true,
        dateFormat: 'yy/mm/dd',
        onClose: function( selectedDate ) {
            $( ".fromDate" ).datepicker( "option", "maxDate", selectedDate );
            $( ".endFromtoDate" ).datepicker( "option", "minDate", selectedDate );
        }
    }).click(function() {
        $(this).datepicker('show');
    });

    $(".endFromtoDate").datepicker({
        changeMonth: true,
        changeYear: true,
        showOn: 'button',
        buttonImage: '../../images/calendar.png',
        buttonImageOnly: true,
        dateFormat: 'yy/mm/dd',
        onClose: function( selectedDate ) {
            $( ".toDate" ).datepicker( "option", "maxDate", selectedDate );
            $( ".fromDate" ).datepicker( "option", "maxDate", selectedDate );
        }
    }).click(function() {
        $(this).datepicker('show');
    });

    $(".fromDateTimeHour").datetimepicker({
        changeMonth: true,
        changeYear: true,
        hourGrid: 4,
        showMinute: false,
        showOn: 'button',
        buttonImage: '../../images/calendar.png',
        buttonImageOnly: true,
        dateFormat: 'yy/mm/dd',
        onClose: function(dateText) {               
            if ($( ".toDateTimeHour" ).val() != '') {
                var testStartDate = $( ".fromDateTimeHour" ).datetimepicker('getDate');
                var testEndDate = $(".toDateTimeHour").datetimepicker('getDate');
                if (testStartDate > testEndDate)
                    $(".toDateTimeHour").datetimepicker('setDate', testStartDate);
            }
            else {
                $(".toDateTimeHour").val(dateText);
            }
        }, 
        onSelect: function (selectedDate){
            $( ".toDateTimeHour" ).datepicker( "option", "minDate", selectedDate );
        }
    }).click(function() {
        $(this).datetimepicker('show');
    });
        
    $(".toDateTimeHour").datetimepicker({
        changeMonth: true,
        changeYear: true,
        hourGrid: 4,
        showMinute: false,
        showOn: 'button',
        buttonImage: '../../images/calendar.png',
        buttonImageOnly: true,
        dateFormat: 'yy/mm/dd',
        onClose: function(dateText) {                
            if ($( ".fromDateTimeHour" ).val() != '') {
                var testStartDate = $( ".fromDateTimeHour" ).datetimepicker('getDate');
                var testEndDate = $(".toDateTimeHour").datetimepicker('getDate');
                if (testStartDate > testEndDate)
                    $(".fromDateTimeHour").datetimepicker('setDate', testEndDate);
            }
            else {
                $(".fromDateTimeHour").val(dateText);
            }
        },
        onSelect: function (selectedDate){
            $( ".fromDateTimeHour" ).datepicker( "option", "maxDate", selectedDate );
        }
    }).click(function() {
        $(this).datetimepicker('show');
    });

    $(".fromDateTime").datetimepicker({
        changeMonth: true,
        changeYear: true,
        hourGrid: 4,
        showMinute: true,
        showOn: 'button',
        buttonImage: '../../images/calendar.png',
        buttonImageOnly: true,
        dateFormat: 'yy/mm/dd',
        onClose: function(dateText) {               
            if ($( ".toDateTime" ).val() != '') {
                var testStartDate = $( ".fromDateTime" ).datetimepicker('getDate');
                var testEndDate = $(".toDateTime").datetimepicker('getDate');
                if (testStartDate > testEndDate)
                    $(".toDateTime").datetimepicker('setDate', testStartDate);
            }
            else {
                $(".toDateTime").val(dateText);
            }
        }, 
        onSelect: function (selectedDate){
            $( ".toDateTime" ).datepicker( "option", "minDate", selectedDate );
        }
    }).click(function() {
        $(this).datetimepicker('show');
    });
        
    $(".toDateTime").datetimepicker({
        changeMonth: true,
        changeYear: true,
        hourGrid: 4,
        showMinute: true,
        showOn: 'button',
        buttonImage: '../../images/calendar.png',
        buttonImageOnly: true,
        dateFormat: 'yy/mm/dd',
        onClose: function(dateText) {                
            if ($( ".fromDateTime" ).val() != '') {
                var testStartDate = $( ".fromDateTime" ).datetimepicker('getDate');
                var testEndDate = $(".toDateTime").datetimepicker('getDate');
                if (testStartDate > testEndDate)
                    $(".fromDateTime").datetimepicker('setDate', testEndDate);
            }
            else {
                $(".fromDateTime").val(dateText);
            }
        },
        onSelect: function (selectedDate){
            $( ".fromDateTime" ).datepicker( "option", "maxDate", selectedDate );
        }
    }).click(function() {
        $(this).datetimepicker('show');
    });



    $(".datetime").datepicker({
        changeMonth: true,
        changeYear: true,
        showOn: 'button',
        buttonImage: '../../images/calendar.png',
        buttonImageOnly: true,
        dateFormat: 'yy/mm/dd'
    }).click(function() {
        $(this).datepicker('show');
    });

    $(".dateandtime").datetimepicker({
        changeMonth: true,
        changeYear: true,
        addSliderAccess: true,
        sliderAccessArgs: {
            touchonly: false
        },
        hourGrid: 4,
        minuteGrid: 10,
        showOn: 'button',
        buttonImage: '../../images/calendar.png',
        buttonImageOnly: true,
        dateFormat: 'yy/mm/dd'
    }).click(function() {
        $(this).datetimepicker('show');
    });

    $(".dateandtimehour").datetimepicker({
        changeMonth: true,
        changeYear: true,

        addSliderAccess: true,
        sliderAccessArgs: {
            touchonly: false
        },
        hourGrid: 4,
        showMinute: false,
        showOn: 'button',
        buttonImage: '../../images/calendar.png',
        buttonImageOnly: true,
        dateFormat: 'yy/mm/dd'
    }).click(function() {
        $(this).datetimepicker('show');
    });
    
    $( ".fromMonth" ).datepicker({
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        dateFormat: 'yymm',
        onClose: function(dateText, inst) { 
            var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
            var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
            $(this).datepicker('setDate', new Date(year, month, 1));
        }     
    }).click(function() {
        $(this).datepicker('show');
    });
    $( ".toDate" ).datepicker({
        changeMonth: true,
        changeYear: true,
        showOn: 'button',
        buttonImage: '../../images/calendar.png',
        buttonImageOnly: true,
        dateFormat: 'yy/mm/dd',
        onClose: function( selectedDate ) {
            $( ".fromDate" ).datepicker( "option", "maxDate", selectedDate );
            $( ".endFromtoDate" ).datepicker( "option", "minDate", selectedDate );
        }
    }).click(function() {
        $(this).datepicker('show');
    });
});